<!--
 * @Description: 
 * @Author: binbin
 * @Date: 2025-04-23
 * @LastEditors: Bart 1714877505@qq.com
 * @LastEditTime: 2025-04-27
-->
<template>
  <div class="detail-box">
    <div class="header">上市管理-添加积分</div>
    <div class="detail">
      <div class="detail-item">
        <div class="detail-item-requirement">
          <div class="detail-item-req-ite">
            <text class="lable">请输入积分编码</text>
            <text class="code"> <a-input v-model:value="coinSymbol" style="width: 400px" :maxlength="20" placeholder="请输入" /></text>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <a-button type="primary" @click="onEdit">开始接入</a-button>
      <a-button class="back" @click="pageBack()">取消</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { message } from 'ant-design-vue'
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'

  import { requestAddcoinPair } from '/@/api/exchange/lanuch'

  const router = useRouter()
  const coinSymbol = ref<string>('')
  /**回退页面*/
  const pageBack = () => {
    router.back()
  }

  const onEdit = async () => {
    /**编辑详情 */
    if (!coinSymbol.value) {
      message.error('请输入积分编码')
      return
    }
    const res = await requestAddcoinPair(coinSymbol.value)
    if (res.responseCode === 100000000) {
      message.success('操作成功')
    } else {
      message.error(res.responseMessage)
    }
  }
</script>
<style lang="less" scoped>
  .detail-box {
    width: 100%;
    padding: 0 24px 30px;
    background: #fff;
    border-radius: 2px;

    .header {
      width: 100%;
      height: 64px;
      border-bottom: 1px solid #f2f3f5;
      font-size: 16px;
      font-weight: bold;
      color: #000;
      line-height: 64px;
    }

    .detail {
      width: 100%;
      margin-top: 20px;
      font-size: 16px;

      .detail-item {
        width: 100%;
        margin-bottom: 40px;

        .detail-item-title {
          color: #000;
        }

        &:first-child {
          display: flex;
          align-items: flex-start;
        }

        .detail-item-order {
          margin-left: 20px;

          .detail-item-order-select {
            width: 200px;
            margin-top: 20px;
          }
        }

        .detail-item-requirement {
          width: 100%;
          display: flex;
          flex-flow: column wrap;
          padding: 0 20px;
          box-sizing: border-box;

          .detail-item-req-ite {
            margin-top: 20px;
            font-size: 14px;
            display: flex;

            .lable {
              color: #666;
              padding-right: 10px;
              text-align: right;
            }

            .code {
              color: #000;
            }

            .icon {
              width: 80px;
              height: 80px;
              background: #f2f3f5;
              vertical-align: top;
            }

            .btn {
              padding-left: 30px;
            }

            .sample-temp {
              margin-left: 10px;
              color: #000;
            }
          }

          .detail-item-req-name {
            width: 100%;
          }
        }
      }
    }

    .footer {
      width: 100%;
      border-top: 1px solid #f2f3f5;
      padding-top: 20px;

      .back {
        margin-left: 20px;
      }
    }
  }
</style>
